<template>
	<view class="e-overflow-ellipsis">
		<view class="e-overflow-ellipsis__content" :style="{ maxHeight }">
			<view class="e-overflow-ellipsis__content__seat" :style="[seatStyle]"></view>
			
			<view class="is-show" v-show="isShow && !showall" @click.stop="showClick(showall)">...{{$_e_t('expand')}}>></view>
			<text class="e-overflow-ellipsis__content__text" :style="[textStyle]">{{ props.text }}</text>
			<view class="is-hidden" v-show="isShow && showall" @click.stop="showClick(showall)">{{$_e_t('folded')}}>></view>
		</view>
		<view class="e-overflow-ellipsis__hidden-text" :id="elId" :style="[textStyle]">{{ props.text }}</view>
	</view>

</template>

<script lang="ts">
	import {defineComponent} from 'vue'
	import mpMixin from "../../libs/mixin/mpMixin";
	export default defineComponent({
		name: "e-overflow-ellipsis",
		mixins: [mpMixin],
	});
</script>

<script lang="ts" setup>
	import {
		ref,
		toRefs,
		computed,
		watch,
		nextTick,
		onMounted
	} from 'vue'
	import {
		overflowEllipsisProps,
		overflowEllipsisEmits
	} from './props'
	import {
		getRect,
		getNvueRect,
		nanoid,
	} from "../../libs/utils";
	import {
		addUnit
	} from "../../libs/utils/_utils";
	import {
		useDefaultProps,
	} from '../../libs/hooks'
	import componentsProps, {
		type DefaultProps
	} from "../../libs/config/componentsProps";

	const {
		overflowEllipsis: overflowEllipsisDefaultProps
	} = toRefs(componentsProps);

	const _props = defineProps(overflowEllipsisProps)
	const props = useDefaultProps < DefaultProps['overflowEllipsis'] > (_props, overflowEllipsisDefaultProps);
	const emit = defineEmits(overflowEllipsisEmits)

	const elId = ref(nanoid(21, true))
	const hiddenRef = ref(null)
	const showall = ref(false); //用来判断是否超出规定行数
	const isShow = ref(false);
	
	const textStyle = computed(() => {
		return {
			fontSize: addUnit(props.value.fontSize),
			lineHeight: addUnit(props.value.lineHeight),
		}
	})
	
	const maxHeight = computed(() => {
		let height = 1.43 * Number(props.value.line)
		return `${showall.value ? 'none' : height+ 'em'}`
	})
	const seatStyle = computed(() => {
		let height = 1.43 * Number(props.value.line)
		return {
			height:`${showall.value? 'none' : (height-1.29)+ 'em'}`
		}
	
	})


	onMounted(async () => {
		let textHeight: number | undefined = 0;
		// #ifndef APP-NVUE
		const usize = await getRect(`#${elId.value}`)
		textHeight = usize.height!
		// #endif

		// #ifdef APP-NVUE
		const nsize = await getNvueRect(hiddenRef.value)
		textHeight = nsize.height!
		// #endif
		
		let lineNum = textHeight / Number(props.value.lineHeight);
		isShow.value = lineNum > Number(props.value.line) + 1.2 ? true : false;

	})


	

	const showClick = (isShowall: boolean) => {
		showall.value = !isShowall;
	}
</script>

<style lang="scss" scoped>
	@import '../../libs/theme/overflowEllipsis.scss';
</style>
